<template>
	<view class="content">
		<view class="u-page">
			<view class="u-demo-block">
				<u--form labelPosition="left" :model="formData" ref="form1" labelWidth="80">
					<text class="u-demo-block__title">基础信息</text>
					<view class="u-demo-block__content">
						
						<u-form-item label="区域" prop="region" borderBottom ref="item1">
							<picker mode="region" @change="regionChange">
								<view class="">{{formData.region}}</view>
							</picker>
							<u-icon slot="right" name="arrow-right"></u-icon>
						</u-form-item>
						
						<u-form-item label="小区名称" prop="quart" borderBottom ref="item1">
							<u--input v-model="formData.quart" border="none" placeholder="输入小区名称"></u--input>
						</u-form-item>
						
						<u-form-item label="房源地址" prop="address" borderBottom @click="showCity" ref="item1">
							<u--input v-model="formData.address" disabled disabledColor="#ffffff" placeholder="请选择房源地址"
								border="none"></u--input>
						</u-form-item>
						
						<u-form-item label="户型" prop="money" borderBottom ref="item1"
							style="display: flex;flex-direction: row;">
							<view class="block" style="display: flex;flex-direction: row;">
								<u-input v-model="formData.room" border="none" placeholder="几室" />
								<u-input v-model="formData.office" border="none" placeholder="几厅" />
								<u-input v-model="formData.guard" border="none" placeholder="几卫" />
							</view>
						</u-form-item>
						
						<u-form-item label="面积" prop="area" borderBottom ref="item1"
							@click="showArea = true; hideKeyboard()">
							<u--input v-model="formData.area" disabled disabledColor="#ffffff" border="none"
								placeholder="选择面积"></u--input>
							<u-icon slot="right" name="arrow-right"></u-icon>
						</u-form-item>
						
						<u-form-item label="意向价格" prop="intention" borderBottom ref="item1"
							@click="showIntention = true; hideKeyboard()">
							<u--input v-model="formData.intention" disabled disabledColor="#ffffff"
								placeholder="请选择意向价格" border="none"></u--input>
							<u-icon slot="right" name="arrow-right"></u-icon>
						</u-form-item>
						
						<u-form-item label="房屋类型" prop="type" borderBottom @click="showType = true; hideKeyboard()"
							ref="item1">
							<u--input v-model="formData.type" disabled disabledColor="#ffffff" placeholder="请选择房屋类型"
								border="none"></u--input>
							<u-icon slot="right" name="arrow-right"></u-icon>
						</u-form-item>

					</view>
					
					<text class="u-demo-block__title block_title"></text>
					<view class="u-demo-block__content">
						<u-form-item label="其他描述" prop="intro" borderBottom ref="item1">
							<u--textarea placeholder="请输入其他描述" v-model="formData.intro" count></u--textarea>
						</u-form-item>
					</view>
					
					<text class="u-demo-block__title block_title"></text>
					
					<view class="u-demo-block__content">
						<u-form-item label="姓名" prop="relname" borderBottom ref="item1">
							<u--input v-model="formData.relname" border="none" placeholder="输入姓名"></u--input>
						</u-form-item>
						<u-form-item label="电话" prop="mobile" borderBottom ref="item1">
							<u--input v-model="formData.mobile" border="none" placeholder="输入电话"></u--input>
						</u-form-item>
					</view>

					<u-button type="primary" text="提交" customStyle="margin-top: 50px" @click="submit"></u-button>
				</u--form>

				<u-action-sheet :show="showArea" :actions="actionArea" title="请选择面积" @close="showArea = false"
					@select="selectArea">
				</u-action-sheet>
				
				<u-action-sheet :show="showIntention" :actions="actionIntention" title="请选择意向价格"
					@close="showIntention = false" @select="selectIntention">
				</u-action-sheet>
				
				<u-action-sheet :show="showType" :actions="actionType" title="请选择房屋类型" @close="showType = false"
					@select="selectType">
				</u-action-sheet>

			</view>
		</view>
		
		
		<u-overlay :show="showModel" @click="showModel = false">
			<view class="warp">
				<view class="rect" @tap.stop>
					<image src="/static/money.png" mode="" class="rect_bg" @click="btnConfirm"></image>
					<text class="left" @click="btnConfirm">发布会员</text>
					<text class="right" @click="btnConfirm">浏览会员</text>
					<image src="/static/close.png" mode="" class="rect-close" @click="showModel = false"></image>
				</view>
			</view>
		</u-overlay>
	</view>
</template>

<script>
	export default {
		data() {
			return {
				formData: {
					region: '请选择区域',
					quart: '',
					area: '',
					room: '',
					office: '',
					type: '',
					guard: '',
					relname: '',
					mobile: '',
					intention:'',
					address:'',
					switch: false,
					intro:''
				},
				showInput: false,

				showArea: false,
				actionArea: [{
					name: '0-90m²'
				}, {
					name: '90-120m²'
				}, {
					name: '120-160m²'
				}, {
					name: '160m²以上'
				}],
				showIntention: false,
				actionIntention: [{
					name: '40万以下'
				}, {
					name: '40-60万'
				}, {
					name: '60-80万'
				}, {
					name: '80-100万'
				}, {
					name: '100-150万'
				}, {
					name: '150万以上'
				}],
				showType: false,
				actionType: [{
					name: '住宅',
				}, {
					name: '公寓',
				}, {
					name: '别墅',
				}, {
					name: '写字楼',
				}, {
					name: '商铺',
				}, {
					name: '厂房',
				}, {
					name: '商住一体',
				}],
				ShowFloorInput: false,
				fileList1: [],
				showModel: false
			}
		},
		created(){
			
		},
		methods: {
			// 房源地址获取
			showCity() {
				let that = this
				uni.chooseLocation({
					success(res) {
						console.log(res)
						that.formData.address = res.address;
					}
				})
			},
			regionChange(e) {
				let address = e.detail.value;
				this.formData.region = address[0] + "," + address[1] + "," + address[2]
			},
			hideKeyboard() {
				uni.hideKeyboard()
			},
			selectType(e) {
				this.formData.type = e.name;
				this.$refs.form1.validateField('type')
			},
			selectRenovation(e) {
				this.formData.renovation = e.name;
				this.$refs.form1.validateField('renovation')
			},
			selectArea(e) {
				this.formData.area = e.name;
				this.$refs.form1.validateField('area')
			},
			buildYearChange(e) {
				let year = e.detail.value;
				this.formData.build_year = year;
			},
			selectFloor(e) {
				console.log(e)
				let floor = e.name;
				if (floor == '自定义楼层') {
					this.ShowFloorInput = true;
				}
				this.formData.floor_type = floor
			},
			selectSource(e) {
				console.log(e)
				let source = e.name;

				this.formData.source = source
			},
			switchChange(e) {
				console.log(e)
				this.showInput = e;
			},
			selectIntention(e){
				console.log(e)
				let intention = e.name
				this.formData.intention = intention
			},
			submit(){
				console.log(this.formData);
				this.http('applet_house_purchase_add',{
					purchase_type:1,
					city: this.formData.region,
					address:this.formData.address,	
					room:this.formData.room,	
					office:this.formData.office,	
					guard:this.formData.guard,	
					area:this.formData.area,	
					intended_price:this.formData.intention,	
					type:this.formData.type,	
					mark:this.formData.intro,	
					relname:this.formData.relname,
					mobile:this.formData.mobile
				}).then(ret=>{
					console.log(ret)
					if (ret.ec == 999) {
						console.log("提示错误")
						that.showModel = true
						that.content = ret.em
						return false;
					}
					if(ret.ec == '200'){
						uni.showToast({
							title:'发布成功',
							success(r){
								uni.navigateBack({
									
								})
							}
						})
					}else{
						uni.showToast({
							title:'发布失败',
							icon:'error',
							fail(err){
								uni.navigateBack({
									
								})
							}
						})
					}
				})
			}
		},
	}
</script>

<style lang="scss" scoped>
	.warp {
		display: flex;
		align-items: center;
		justify-content: center;
		height: 100%;
	}
	
	.rect {
		width: 523upx;
		height: 502upx;
		position: relative;
	
		.rect_bg {
			width: 100%;
			height: 100%;
		}
	
		.left {
			position: absolute;
			bottom: 30rpx;
			left: 65rpx;
			color: #fff;
			font-size: 28rpx;
		}
	
		.right {
			position: absolute;
			bottom: 30rpx;
			right: 75rpx;
			color: #fff;
			font-size: 28rpx;
		}
	
		.rect-close {
			width: 50rpx;
			height: 50rpx;
			position: absolute;
			top: 65rpx;
			right: 19rpx;
		}
	}
	.u-page {
		width: 94%;
		margin: 0 auto;
	}

	.u-demo-block__title {
		width: 100%;
		display: flex;
		font-size: 28rpx;
		margin-top: 20rpx;
		color: #888;
	}

	.block_title {
		border-top: 20rpx solid #f8f8f8;
	}

	.input_inline {
		width: 33%;
	}
</style>
